<template>
	<z-paging ref="paging" class="z-paging page_bg" v-model="useList" @query="getInfo"
		:hide-loading-more-when-no-more-by-limit="5">
		<view class="flex-col group_2">
			<view class="flex-col section_1">
				<view class="flex-col section_2">
					<text class="text_1">我的学习币</text>
					<view class="justify-between group_3">
						<text class="text_2">{{coin}}</text>
						<view class="flex-col items-center group_4" v-if="flag"
							@click="navigateTo('/pages/mine/account/recharge', false)">
							<text>充值</text>
							<image src="/static/local/ba579c85d15446a8613e2c81f95c7556.png" class="image_2" />
						</view>
					</view>
				</view>
			</view>
			<view class="flex-row group_5">
				<image src="/static/local/3aa07251028c2ee9d409337d259cb3f9.png" class="image_3" />
				<text class="text_4">明细记录</text>
			</view>
		</view>
		<view class="justify-between group_6" v-for="item in useList" :key="item._id">
			<view class="flex-col">
				<text class="text_5">{{showText(item.useOrRecharge)}}</text>
				<text class="text_6">{{item._add_time_str}}</text>
			</view>
			<text class="text_7">{{item.useOrRecharge == 'use' ? '-' : '+'}} {{item.number}}</text>
		</view>
	</z-paging>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				coin: 0,
				useList: [],

				flag: true
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		computed: {
			showText() {
				return (type) => {
					switch (type) {
						case 'use':
							return '使用学习币'
						case 'recharge':
							return '充值学习币'
						case 'admin':
							return '管理员充值'
					}
				}
			}
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				if (uni.getSystemInfoSync().platform === 'android') this.flag = true
			},
			getInfo(pageIndex, pageSize) {
				vk.callFunction({
					url: 'client/accout/kh/getCoinAndList',
					title: '请求中...',
					data: {
						pageIndex,
						pageSize,
						need_user_info: true
					},
					success: function(data) {
						console.log(data)
						that.coin = data.coin
						that.$refs.paging.complete(data.rows);
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.group_2 {
		padding: 20rpx 20rpx 0;
		background: #F5F5F5;

		.section_1 {
			background-image: url('/static/local/9219dd8ac587f03ba0b85aaac780edad.png');
			background-position: 0px 0px;
			background-size: 100% 100%;
			background-repeat: no-repeat;

			.section_2 {
				padding: 66rpx 30rpx 62rpx 45rpx;
				background-image: url('/static/local/16403090578239045115.png');
				background-position: 0px 0px;
				background-size: 709rpx 276rpx;
				background-repeat: no-repeat;

				.text_1 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}

				.group_3 {
					margin-top: 16rpx;

					.text_2 {
						color: rgb(51, 51, 51);
						font-size: 80rpx;
						line-height: 96rpx;
						white-space: nowrap;
						font-weight: bold;
					}

					.group_4 {
						margin-top: 42rpx;
						padding: 12rpx 0 10rpx;
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
						width: 134rpx;
						position: relative;

						.image_2 {
							border-radius: 10rpx;
							width: 134rpx;
							height: 56rpx;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							position: absolute;
						}
					}
				}
			}
		}

		.group_5 {
			padding: 34rpx 0 23rpx;
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			line-height: 38rpx;
			white-space: nowrap;

			.image_3 {
				margin: 9rpx 0;
				width: 20rpx;
				height: 20rpx;
			}

			.text_4 {
				margin-left: 10rpx;
			}
		}
	}

	.group_6 {
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #F0F0F0;

		.text_7 {
			align-self: center;
			color: rgb(51, 51, 51);
			font-size: 30rpx;
			line-height: 36rpx;
			white-space: nowrap;
		}

		.text_5 {
			color: rgb(51, 51, 51);
			font-size: 30rpx;
			line-height: 36rpx;
			white-space: nowrap;
		}

		.text_6 {
			margin-top: 16rpx;
			color: rgb(153, 153, 153);
			font-size: 24rpx;
			line-height: 29rpx;
			white-space: nowrap;
		}
	}
</style>